<template>
  <div class="content">
    <div class="main">
      <div class="head" :style="style">
        <div class="title">远能物资质量检测中心</div>
        <div class="time">{{ currentTime }}</div>
      </div>
      <div class="container">
        <RightModuleVue></RightModuleVue>
        <Middle></Middle>
        <Live></Live>
      </div>
    </div>
  </div>
</template>


<script>
import Middle from "./components/middle.vue";
import RightModuleVue from "./components/rightModule.vue";
import Live from "./components/live.vue";

export default {
  name: "Screen",
  props: {},
  components: {
    RightModuleVue,
    Middle,
    Live,
  },
  computed: {
    style() {
      return {
        backgroundImage: `url(${this.bgStyle})`,
        // backgroundSize: "cover", // 背景图片大小自适应
        // backgroundPosition: "center", // 背景图片居中显示
        backgroundRepeat: "no-repeat", // 确保背景图片不重复
        backgroundSize: "100% 100%",
      };
    },
  },
  data() {
    return {
      bgStyle: require("@/assets/head.png"),
      currentTime: "",
      timer: null,
    };
  },
  methods: {
    updateClock() {
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, "0"); // 月份从0开始
      const day = String(now.getDate()).padStart(2, "0");
      const hours = String(now.getHours()).padStart(2, "0");
      const minutes = String(now.getMinutes()).padStart(2, "0");
      const seconds = String(now.getSeconds()).padStart(2, "0");
      this.currentTime = `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`;
    },
  },
  mounted() {
    this.updateClock();
    this.timer = setInterval(this.updateClock, 1000);
  },
};
</script>


<style lang="scss" scoped>
.content {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main {
  width: 100vw;
  height: 50vh;
  background-color: #000549;

  .head {
    width: 100%;
    color: white;
    // background-color: lightblue;
    height: 8vh;
    position: relative;

    .title {
      text-align: center;
      line-height: 6vh;
      font-size: 22px;
      font-weight: bold;
    }
    .time {
      font-size: 16px;
      position: absolute;
      left: 30px;
      top: 41px;
    }
  }

  .container {
    display: flex;
  }
}
</style>
